<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SJ1</title>
</head>
<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            color: #5e5b64;
            text-align: center;
        }

        a,a:visited {
            outline: none;
            color: #389dc1;
        }

        a:hover {
            /* 去除下划线 */
            text-decoration: none;
        }

        section,
        footer,
        header,
        aside,
        nav {
            display: block;
        }

        nav {
            display: inline-block;
            margin: 60px auto 45px;
            background-color: #5597b4;
            box-shadow: 0 1px 1px #CCCCCC;
            border-radius: 2px;
        }

        nav a {
            display: inline-block;
            padding: 18px 30px;
            color: #FFFFFF ;
            font-weight: bold;
        }
</style>

<body>
    <div id="main">
        <!-- 激活的菜单样式为active类-->
        <!-- 为了阻止链接在点击时跳转，我们使用了"prevent"修饰（preventDefaunlt） -->
        <nav v-bind:class="active" v-on:click.prevent>
            <!-- 当菜单上的链接被点击时，我们调用了makeActive方法 该方法在vue实例中创建-->
            <a class="home" v-on:click="makeActive('HTML')">HTML</a>
            <a class="projects" v-on:click="makeActive('CSS')">CSS</a>
            <a class="services" v-on:click="makeActive('JavaScript')">JavaScript</a>
            <a class="contact" v-on:click="makeActive('Vue')">Vue.js</a>
        </nav>
        <!-- 点一下"active"变量会根据当前选中的值来自动变换 -->
        <p>您选择了<b>{{active}}</b></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        var demo = new Vue({
            //DOM元素，挂载视图模型
            el: '#main',
            //定义属性，并设置初始值
            data: {
                active: 'HTML'
            },
            //点击菜单使用的函数
            methods: {
                makeActive: function (item) {
                    //模型改变，视图会自动更新
                    this.active = item;
                }
            }
        })
    </script>
</body>

</html>